<template>
  <div class="personal">
    <div class="user" @click="toEdit">
      <img
        v-if="userInfo.head_img"
        :src="$axios.defaults.baseURL + userInfo.head_img"
        class="avatar"
        alt
      />
      <img v-else src="@/assets/logo.png" alt class="avatar" />
      <div class="username">
        <span
          class="iconfont"
          :class="{
            iconxingbienan: userInfo.gender == 1,
            iconxingbienv: userInfo.gender == 0,
          }"
        ></span>
        {{ userInfo.nickname }}
        <div class="date">2020-09-18</div>
      </div>
      <span class="iconfont iconjiantou1"></span>
    </div>
    <personal-cell
      tag="我的关注"
      desc="关注的用户"
      @click="$router.push('/follows')"
    />
    <personal-cell tag="我的跟帖" desc="跟帖 / 回复" />
    <personal-cell
      tag="我的收藏"
      desc="文章 / 视频"
      @click="$router.push('/star')"
    />
    <personal-cell tag="设置" @click="toEdit" />
    <personal-cell tag="退出" @click="logout" />
  </div>
</template>

<script>
import PersonalCell from "../../components/PersonalCell";
export default {
  name: "Personal",
  components: {
    PersonalCell,
  },
  mounted() {
    this.getUserInfo();
  },
  data() {
    return {
      userInfo: {},
    };
  },
  methods: {
    getUserInfo() {
      const userId = window.localStorage.getItem("userId");
      this.$axios.get("/user/" + userId).then((res) => {
        const data = res.data;
        if (data.message === "获取成功") {
          this.userInfo = data.data;
        }
      });
    },
    logout() {
      window.localStorage.clear();
      this.$router.replace("/login");
    },
    toEdit() {
      this.$router.push("/edit");
    },
  },
};
</script>

<style scoped lang="less">
.personal {
  .user {
    display: flex;
    align-items: center;
    padding: 24/360 * 100vw;
    border-bottom: 4px solid #e4e4e4;

    .avatar {
      width: 70/360 * 100vw;
      height: 70/360 * 100vw;
      border-radius: 50%;
      object-fit: cover;
    }
    .username {
      flex: 1;
      padding-left: 10/360 * 100vw;
      font-size: 14/360 * 100vw;
      .iconxingbienan {
        color: #83bfec;
      }
      .iconxingbienv {
        color: #f43dbf;
      }
      .date {
        color: #888;
        padding-top: 6/360 * 100vw;
      }
    }
  }
}
</style>
